<template>
	<view class="seckill">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+';'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>{{title}}</span>
			</view>
		</header>
		<image class="no_record" v-if='!list.length&&status=="nomore"' src="../../../static/image.png" mode="widthFix">
		</image>
		<main>
			<view class="list" v-for="val in list" :key="val.id"
				@click="spik('pages/homeList/detailedness/detailedness?id='+val.id+'&type=1')">
				<span v-if="val.discount">{{val.discount.title}}</span>
				<image :src="URLimg+val.image" mode="aspectFill"></image>
				<p>{{val.name}}</p>
				<view>
					<span><text>￥</text>{{val.sell_price}}</span>
					<image v-if="val.collection!=1" src="../../../static/home/6.png" mode="widthFix"></image>
					<image v-if="val.collection==1" src="../../../static/home/7.png" mode="widthFix"></image>
				</view>
			</view>
		</main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: {},
				title: '超级秒杀',
				page: 1,
				keyword: '',
				parameter: '',
				category_id: '',
				URLimg: this.URLimg,
				height: {},
				flag: false,
				list: [],
				// 加载状态 loading加载中 nomore没有更多了 loadmore加载更多
				status: "loadmore",
				img: '',
				judge: true,
			};
		},
		onShareAppMessage: function(res) {
			return {
				title: this.title,
				path: 'pages/homeList/seckill/seckill?title=' + this.title + '&category_id=' + this.category_id +
					'&img=' + this.img,
				imageUrl: this.URLimg + this.img
			}
		},
		onLoad(res) {
			
			this.title = res.title
			this.category_id = res.category_id || ''
			this.keyword = res.keyword || ''
			this.parameter = res.parameter || ''
			this.img = res.img || ''
			this.height = uni.getStorageSync('header')
			this.getGoodsLists()
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
			let res = uni.getEnterOptionsSync()
			if (res.scene == 1007 || res.scene == 1008 || res.scene == 1017 || res.scene == 1044 || res.scene == 1154 || res.scene == 1155) {
				this.judge=false
			}
		},
		// 触底刷新
		onReachBottom() {
			if (this.flag) {
				this.getGoodsLists()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.flag = true
			this.getGoodsLists()
		},
		methods: {
			retreat(delta) {
				if (this.judge) {
					uni.navigateBack({
						delta,
					});
				} else {
					uni.switchTab({
						url: '/pages/tabbar/index'
					});
				}
			},
			spik(url) {
				let pages = [
					'pages/homeList/detailedness/detailedness',
				]
				let judge = pages.find(val => {
					const regex = new RegExp(val);
					let isMatch = regex.test(url);
					return isMatch
				})
				if (judge && !uni.getStorageSync('token')) {
					return uni.showToast({
						title: '请先前往我的页面登录后查看。',
						icon: 'none',
					});
				}
				uni.navigateTo({
					url: '/' + url
				});
			},
			getGoodsLists() {
				this.status = "loading"
				this.apifun.unirequest('/api/goods/getGoodsLists', 'post', {
					page: this.page,
					parameter: this.parameter,
					keyword: this.keyword,
					category_id: this.category_id,
				}, (res) => {
					if (res.code == 0) {
						return this.apifun.toast(res.msg)
					}
					if (res.code == 200) {
						this.status = "loadmore"
						if (res.data.last_page > res.data.current_page) {
							this.page++;
							this.flag = true
						} else {
							this.flag = false
							this.status = "nomore"
						}
						this.list.push(...res.data.data)
					}
					uni.stopPullDownRefresh()
				}, true,true)
			}
		}
	}
</script>

<style lang="scss">
	.seckill {
		padding-bottom: 40rpx;

		&>main {
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&>.list {
				width: 336rpx;
				height: 490rpx;
				margin-top: 20rpx;
				background: url('https://jewelry.hn8090kj.com/uploads/image/5.png') no-repeat;
				background-size: 100% 100%;
				padding: 12rpx 16rpx 0;
				box-sizing: border-box;
				font-weight: bold;
				position: relative;

				&>span {
					color: #fff;
					padding: 0 10rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 20rpx;
					background-color: #F1221B;
					border-radius: 20rpx 0 20rpx 0;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 997;
				}

				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>image {
						width: 40rpx;
						@include cssimg;
					}

					&>span {
						font-size: 16px;
						color: #F1221B;

						&>text {
							font-size: 12px;
						}
					}
				}

				&>p {
					font-size: 14px;
					margin-bottom: 14rpx;
					@include csstext(2);
				}

				&>image {
					width: 304rpx;
					height: 320rpx;
					border-radius: 20rpx;
					display: block;
					margin-bottom: 14rpx;
					@include cssimg;
				}
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>